{extend name='./_content'}

{block name='mid'}
<!--默认显示的是折线图-->
<div class="row">
    <div class="panel panel-default col-md-5">
        <div class="panel-heading">
            <h3 class="panel-title">一个简单的例子</h3>
        </div>
        <div class="panel-body">
            <!--定义显示的标签-->
            <div class="ct-chart ct-perfect-fourth" id="ch1"></div>
        </div>
        <script type="text/javascript">
            $(function () {
                cl.init();
            });
            var cl = {
                data:{
                    labels:['1','2','3','4','5','6','7'],//定义x坐标显示的数组
                    series:[
                        [-12,13,16,23,16,15,null],
                        [11,null,-18.9,21,14,17,11],
                        [14,17,13,null,12,-12,14],
                    ]//定义y坐标显示的数据

                },
                options:{
                    height:300,//定义图表高度
                    width:'100%',//定义图标宽度
                    showPoint: true,//是否显示数据点，默认true
                    lineSmooth:true,//是否显示平滑的曲线，默认true显示平滑的曲线，否则显示折线
                    axisX:{
                        //x坐标轴设置
                        showGrid:true,//是否显示水平方向上的网格,默认true显示
                        showLabel:true,//是否显示横坐标对应的项，默认为true显示
                    },
                    axisY:{
                        //纵坐标设置
                        //offset:30,//margin-left
                        labelInterpolationFnc:function (arg) {
                            return '￥' + arg;//返回Y坐标上显示的值
                        }
                    }
                },
                init:function () {
                    //实例化图标
                    new Chartist.Line('#ch1', this.data,this.options);
                }
            };
        </script>
    </div>

    <div class="panel panel-default col-md-5 col-md-offset-2">
        <div class="panel-heading">
            <h3 class="panel-title">第二个简单的例子</h3>
        </div>
        <div class="panel-body">
            <!--定义显示的标签-->
            <div class="ct-chart ct-perfect-fourth" id="ch2"></div>
        </div>
        <script type="text/javascript">
            $(function () {
                cl2.init();
            });
            var cl2 = {
                data:{
                    labels:['礼拜天','星期一','星期二','星期三','星期四','星期五','周六'],//定义x坐标显示的数组
                    series:[
                        [12,13,16,23,16,15,12],
                        [11,15,18,21,14,17,11],
                        [14,17,13,13,12,12,14],
                    ]//定义y坐标显示的数据

                },
                options:{
                    height:300,//定义图表高度
                    width:'100%',//定义图标宽度
                    showArea:false,//是否显示面积，默认为false不显示
                    low:0,

                },
                init:function () {
                    //实例化图标
                    new Chartist.Line('#ch2', this.data,this.options)
                        .on('draw', function(data) {
                            if(data.type === 'line' || data.type === 'area') {
                                data.element.animate({
                                    d: {
                                        begin: 2000 * data.index,
                                        dur: 2000,
                                        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                                        to: data.path.clone().stringify(),
                                        easing: Chartist.Svg.Easing.easeOutQuint
                                    }
                            });
                        }
                    });//动画效果
                }
            };
        </script>
    </div>
</div>


<!--显示柱形图-->
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
        <div id="ch3" class="ct-chart ct-perfect-fourth"></div>
        <script type="text/javascript">
            $(function () {
                cl3.init();
            });

            var cl3 = {
                data:{
                    labels:['礼拜天','星期一','星期二','星期三','星期四','星期五','周六'],//定义x坐标显示的数组
                    series:[
                        [12,13,16,23,-  16,15,12],
                        [11,15,18,21,14,17,11],
                        [14,17,13,13,12,12,14],
                    ]//定义y坐标显示的数据

                },
                options:{
                    height:300,//定义图表高度
                    width:'100%',//定义图标宽度
                    showPoint: false,//是否显示数据点，默认true
                    lineSmooth:false,//是否显示平滑的曲线，默认true显示平滑的曲线，否则显示折线
                    axisX:{
                        //x坐标轴设置
                        showGrid:false,//是否显示水平方向上的网格,默认true显示
                        showLabel:true,//是否显示横坐标对应的项，默认为true显示
                    },
                    axisY:{
                        //纵坐标设置
                        //offset:30,//margin-left
                        labelInterpolationFnc:function (arg) {
                            return '￥' + arg;//返回Y坐标上显示的值
                        }
                    },
                    seriesBarDistance:10
                },
                init:function () {
                    //实例化图标
                    new Chartist.Bar('#ch3', this.data,this.options);
                }
            };
        </script>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <div id="ch4" class="ct-chart ct-perfect-fourth"></div>
        <script type="text/javascript">
            $(function () {
                cl4.init();
            });

            var cl4 = {
                data:{
                    labels: ['Bananas', 'Apples', 'Grapes'],
                    series: [20, 15, 40]
                },
                options:{
                    labelInterpolationFnc: function(value) {
                        return value[0]
                    }
                },
                init:function () {
                    //实例化图标
                    new Chartist.Pie('#ch4', this.data,this.options,[
                        ['screen and (min-width: 640px)', {
                            chartPadding: 30,
                            labelOffset: 100,
                            labelDirection: 'explode',
                            labelInterpolationFnc: function(value) {
                                return value;
                            }
                        }],
                        ['screen and (min-width: 1024px)', {
                            labelOffset: 80,
                            chartPadding: 20
                        }]
                    ]);
                }
            };
        </script>
    </div>
</div>

{/block}